<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#outer{
				position: relative;
				height: 200px;				
				width: 200px;
				background: blue;
			}
			#inner{
				position: absolute;
				left: 0;
				top: 50%;
				height: 100px;				
				width: 100px;
				background: red;
				transform: translate3d(0, -50%, 0);
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
		<script>
			$(function(){
				/*
				// 1. 给outer绑定点击事件监听(两种方式绑定)
				$("#outer").click(function(){
					console.log("click outer")
				})
				$("#outer").on("click", function(){
					console.log("on click outer")
				})
				
				// 2. 给inner绑定鼠标移入和移除的事件监听(用三种方式)
				$("#inner")
					.mouseenter(function(){ // 进入
						console.log("进入")
					})
					.mouseleave(function(){ // 离开
						console.log("离开")
					})
				*/	
				
				/*
				$("#inner")
					.on("mouseenter", function(){ // 进入
						console.log("进入2")
					})
					.on("mouseleave", function(){ // 离开
						console.log("离开2")
					})
				*/
				$("#inner").hover(function(){ 
					console.log("进入3")
				}, function(){ 
					console.log("离开3")
				})
				
				/*
				// 3. 点击btn解除#inner上的所有事件监听
				$("#btn").click(function(){
					$("#inner").off()
				})
				*/
				
				/*
				// 4. 点击btn解除#inner上的mouseenter事件监听
				$("#btn2").click(function(){
					$("#inner").off("mouseenter")
				})
				*/
				
				// 5. 点击btn3得到事件坐标
				//event.clientX  相对视口的左上角坐标
				//event.pageX  相对页面左上角坐标
				//event.offsetX  相对事件元素左上角坐标
				
				// 6. 点击#inner区域, 外部点击监听不响应
				$("#inner").click(function(event){
					console.log("click inner")
					// 停止事件冒泡
					event.stopPropagation()
				})
				
				
				// 7. 点击链接, 如果当前时间时偶数不跳转
				$("a").click(function(event){
					if(Date.now()%2===0){
						event.preventDefault()
					}
				})
				
				/*
				 * 区别mouseover和mouseenter
				 * 		mouseover 在移入子元素时也会触发, 对应mouseout
				 * 		mouseenter 只在移入当前元素才会触发, 对应mouseleave
				 * 		hover()使用的就是mouseenter()和mouseleave()
				 */
			})
		</script>
	</head>
	<body>
		<div id="outer">
			<div id="inner"></div>
		</div>
		<button type="button" id="btn">取消绑定所有事件</button>
		<button type="button" id="btn2">取消绑定mouseenter事件</button>
		<button type="button" id="btn3">获取事件坐标</button>
		<a href="https://www.baidu.com/">百度一下</button>
	</body>
</html>
